<template>
	<view class="home-page">
		<!-- 欢迎区域 -->
		<view class="welcome-section">
			<view class="welcome-content">
				<view class="welcome-title">
					<text class="title-main">算法学习平台</text>
					<text class="title-sub">提升编程能力，备战信息学竞赛</text>
				</view>
				<view class="welcome-btns">
					<button class="btn-primary" @click="navigateTo('/pages/problem/list')">开始刷题</button>
					<button class="btn-outline" @click="navigateTo('/pages/learn/path')">学习路径</button>
				</view>
			</view>
			<view class="welcome-image">
				<image src="/static/home/banner.png" mode="widthFix" />
			</view>
		</view>
		
		<!-- 今日推荐 -->
		<view class="today-section">
			<view class="section-header">
				<text class="section-title">今日推荐</text>
				<text class="refresh-link" @click="refreshRecommend">换一批</text>
			</view>
			
			<view class="problem-cards">
				<view 
					v-for="(problem, index) in recommendProblems" 
					:key="problem.id" 
					class="problem-card"
					@click="navigateToProblem(problem.id)"
				>
					<view class="problem-difficulty">
						<text :class="'difficulty-' + problem.difficulty"></text>
					</view>
					<view class="problem-id">{{problem.id}}</view>
					<view class="problem-title">{{problem.title}}</view>
					<view class="problem-tags">
						<text v-for="(tag, tagIndex) in problem.tags" :key="tagIndex" class="tag">
							{{tag}}
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 学习目标和统计 -->
		<view class="stats-section">
			<view class="progress-card">
				<view class="card-header">
					<text class="card-title">本周学习目标</text>
				</view>
				<view class="progress-container">
					<view class="progress-bar">
						<view class="progress-inner" :style="{width: weeklyProgress + '%'}"></view>
					</view>
					<view class="progress-text">
						<text>已完成 {{completedProblems}}/{{weeklyGoal}} 题</text>
						<text>{{weeklyProgress}}%</text>
					</view>
				</view>
				<view class="goal-suggestion" v-if="completedProblems < weeklyGoal">
					<text>💡 还需要解决 {{weeklyGoal - completedProblems}} 道题目达成目标</text>
				</view>
				<view class="goal-suggestion" v-else>
					<text>🎉 恭喜！本周目标已达成</text>
				</view>
			</view>
			
			<view class="stats-card">
				<view class="card-header">
					<text class="card-title">我的刷题统计</text>
					<text class="view-more" @click="navigateTo('/pages/analysis/index')">查看详情</text>
				</view>
				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-value">{{stats.totalSolved}}</text>
						<text class="stat-label">总题数</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{stats.easyCount}}</text>
						<text class="stat-label">简单</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{stats.mediumCount}}</text>
						<text class="stat-label">中等</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{stats.hardCount}}</text>
						<text class="stat-label">困难</text>
					</view>
				</view>
				<view class="chart-container">
					<view class="dummy-chart">
						<view class="chart-bar" v-for="(day, index) in stats.activityData" :key="index"
								:style="{height: day.value + 'px', backgroundColor: getActivityColor(day.value)}">
						</view>
					</view>
					<text class="chart-label">最近7天活动</text>
				</view>
			</view>
		</view>
		
		<!-- 最新动态 -->
		<view class="news-section">
			<view class="section-header">
				<text class="section-title">最新动态</text>
				<text class="view-more" @click="navigateTo('/pages/news/list')">更多</text>
			</view>
			
			<view class="news-list">
				<view v-for="(news, index) in newsList" :key="index" class="news-item">
					<view class="news-meta">
						<text class="news-tag" :class="news.type">{{news.type}}</text>
						<text class="news-date">{{news.date}}</text>
					</view>
					<view class="news-title" @click="navigateTo(news.link)">{{news.title}}</view>
				</view>
			</view>
		</view>
		
		<!-- 竞赛日历 -->
		<view class="contest-calendar">
			<view class="section-header">
				<text class="section-title">近期竞赛</text>
				<text class="view-more" @click="navigateTo('/pages/contest/list')">全部竞赛</text>
			</view>
			
			<view class="upcoming-contests">
				<view 
					v-for="(contest, index) in upcomingContests" 
					:key="contest.id"
					class="contest-item"
					@click="navigateToContest(contest.id)">
					<view class="contest-date">
						<text class="day">{{contest.day}}</text>
						<text class="month">{{contest.month}}</text>
					</view>
					<view class="contest-info">
						<text class="contest-title">{{contest.title}}</text>
						<text class="contest-time">{{contest.time}} | {{contest.duration}}</text>
					</view>
					<view class="contest-participants">
						<text class="participant-count">{{contest.participants}}人报名</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickname: "算法小能手",
					level: 3,
					points: 2580,
					ranking: 267
				},
				weeklyGoal: 20,
				completedProblems: 14,
				recommendProblems: [
					{
						id: 123,
						title: "两数之和",
						difficulty: 1,
						tags: ["数组", "哈希表"]
					},
					{
						id: 456,
						title: "最长回文子串",
						difficulty: 2,
						tags: ["字符串", "动态规划"]
					},
					{
						
						id: 789,
						title: "寻找两个有序数组的中位数",
						difficulty: 3,
						tags: ["数组", "二分查找", "分治"]
					},
					{
						id: 101,
						title: "对称二叉树",
						difficulty: 1,
						tags: ["树", "DFS", "BFS"]
					}
				],
				stats: {
					totalSolved: 278,
					easyCount: 152,
					mediumCount: 96,
					hardCount: 30,
					activityData: [
						{ day: "一", value: 25 },
						{ day: "二", value: 40 },
						{ day: "三", value: 15 },
						{ day: "四", value: 30 },
						{ day: "五", value: 50 },
						{ day: "六", value: 60 },
						{ day: "日", value: 35 }
					]
				},
				newsList: [
					{
						type: "公告",
						date: "2023-05-18",
						title: "系统更新：新增高级算法专题课程",
						link: "/pages/news/detail?id=1001"
					},
					{
						type: "比赛",
						date: "2023-05-17",
						title: "每周算法挑战赛第123期报名开始",
						link: "/pages/contest/detail?id=1001"
					},
					{
						type: "题解",
						date: "2023-05-15",
						title: "【精选题解】动态规划解决0-1背包问题",
						link: "/pages/solution/detail?id=1001"
					}
				],
				upcomingContests: [
					{
						id: 1001,
						title: "每周算法挑战赛#123",
						day: "20",
						month: "5月",
						time: "14:00-16:00",
						duration: "2小时",
						participants: 1243
					},
					{
						id: 1002,
						title: "ACM训练赛 #45",
						day: "25",
						month: "5月",
						time: "19:00-22:00",
						duration: "3小时",
						participants: 689
					}
				]
			};
		},
		computed: {
			weeklyProgress() {
				return Math.floor((this.completedProblems / this.weeklyGoal) * 100);
			}
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({ url });
			},
			navigateToProblem(id) {
				uni.navigateTo({
					url: `/pages/problem/detail?id=${id}`
				});
			},
			navigateToContest(id) {
				uni.navigateTo({
					url: `/pages/contest/detail?id=${id}`
				});
			},
			refreshRecommend() {
				uni.showLoading({ title: '加载中' });
				
				// 模拟刷新推荐
				setTimeout(() => {
					// 简单的随机排序
					this.recommendProblems.sort(() => Math.random() - 0.5);
					uni.hideLoading();
					uni.showToast({
						title: '推荐已更新',
						icon: 'success'
					});
				}, 800);
			},
			getActivityColor(value) {
				if (value < 20) return '#ebedf0';
				if (value < 30) return '#c6e48b';
				if (value < 45) return '#7bc96f';
				return '#239a3b';
			}
		}
	}
</script>

<style>
	.home-page {
		padding: 20px;
	}

	/* 欢迎区域 */
	.welcome-section {
		display: flex;
		background-color: #fff;
		border-radius: 8px;
		padding: 30px;
		margin-bottom: 25px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.welcome-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.welcome-title {
		margin-bottom: 25px;
	}

	.title-main {
		font-size: 36px;
		font-weight: bold;
		margin-bottom: 12px;
		display: block;
	}

	.title-sub {
		font-size: 18px;
		color: #666;
	}

	.welcome-btns {
		display: flex;
	}

	.btn-primary,
	.btn-outline {
		height: 44px;
		padding: 0 25px;
		font-size: 16px;
		border-radius: 4px;
		margin-right: 15px;
	}

	.btn-primary {
		background-color: #5cb85c;
		color: #fff;
		border: none;
	}

	.btn-outline {
		background-color: transparent;
		color: #5cb85c;
		border: 1px solid #5cb85c;
	}

	.welcome-image {
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.welcome-image image {
		width: 90%;
	}

	/* 今日推荐 */
	.today-section {
		margin-bottom: 25px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
	}

	.refresh-link, 
	.view-more {
		font-size: 14px;
		color: #5cb85c;
		cursor: pointer;
	}

	.problem-cards {
		display: flex;
		justify-content: space-between;
	}

	.problem-card {
		width: 23%;
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.problem-card:hover {
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
	}

	.problem-difficulty {
		position: absolute;
		top: 0;
		left: 0;
		width: 4px;
		height: 100%;
	}

	.difficulty-1 {
		background-color: #5cb85c;
	}

	.difficulty-2 {
		background-color: #f0ad4e;
	}

	.difficulty-3 {
		background-color: #d9534f;
	}

	.difficulty-4 {
		background-color: #9c27b0;
	}

	.problem-id {
		font-size: 14px;
		color: #999;
		margin-bottom: 8px;
	}

	.problem-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 12px;
		height: 44px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.problem-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		font-size: 12px;
		padding: 2px 6px;
		background-color: #f5f5f5;
		border-radius: 4px;
		margin-right: 6px;
		margin-bottom: 6px;
		color: #666;
	}

	/* 统计和目标 */
	.stats-section {
		display: flex;
		margin-bottom: 25px;
	}

	.progress-card,
	.stats-card {
		width: 48%;
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.progress-card {
		margin-right: 4%;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.card-title {
		font-size: 18px;
		font-weight: bold;
	}

	.progress-bar {
		height: 8px;
		background-color: #f0f0f0;
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 8px;
	}

	.progress-inner {
		height: 100%;
		background-color: #5cb85c;
		border-radius: 4px;
	}

	.progress-text {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #666;
		margin-bottom: 15px;
	}

	.goal-suggestion {
		font-size: 14px;
		color: #666;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 4px;
	}

	.stats-grid {
		display: flex;
		margin-bottom: 20px;
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-value {
		display: block;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.stat-label {
		font-size: 14px;
		color: #666;
	}

	.chart-container {
		text-align: center;
	}

	.dummy-chart {
		height: 60px;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.chart-bar {
		width: 12%;
		border-radius: 2px;
	}

	.chart-label {
		font-size: 12px;
		color: #999;
	}

	/* 新闻部分 */
	.news-section {
		margin-bottom: 25px;
	}

	.news-list {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px 20px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.news-item {
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}

	.news-item:last-child {
		border-bottom: none;
	}

	.news-meta {
		display: flex;
		margin-bottom: 8px;
	}

	.news-tag {
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.news-tag.公告 {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.news-tag.比赛 {
		background-color: #f6ffed;
		color: #52c41a;
	}

	.news-tag.题解 {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.news-date {
		font-size: 12px;
		color: #999;
	}

	.news-title {
		font-size: 16px;
		cursor: pointer;
	}

	.news-title:hover {
		color: #5cb85c;
	}

	/* 竞赛日历 */
	.contest-calendar {
		margin-bottom: 25px;
	}

	.upcoming-contests {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px 20px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.contest-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.contest-item:last-child {
		border-bottom: none;
	}

	.contest-item:hover {
		background-color: #f9f9f9;
	}

	.contest-date {
		width: 60px;
		text-align: center;
		margin-right: 15px;
	}

	.day {
		display: block;
		font-size: 24px;
		font-weight: bold;
	}

	.month {
		font-size: 14px;
		color: #666;
	}

	.contest-info {
		flex: 1;
	}

	.contest-title {
		display: block;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.contest-time {
		font-size: 14px;
		color: #666;
	}

	.contest-participants {
		width: 120px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.participant-count {
		font-size: 14px;
		color: #666;
	}
</style>
